<template>
    <div class="role_wrap flex-row">
        <a-card title="角色列表" style="width: 300px">
            <template #extra><a-button size="middle" type="primary" @click="pickItem(null)">添加角色</a-button></template>
            <div class="side_box flex-column">
                <a-spin v-if="loading" style="margin-top:30px;" />
                <template v-else>
                    <template v-if="list.length">
                        <template v-for="item in list" :key="item.id">
                            <div :class="['side_item', name == item.name && 'active']" @click="selectItem(item)">
                                <span class="name">{{ item.name }}</span>
                                <a-button type="link" @click.stop="pickItem(item)" :icon="h(FormOutlined)" />
                                <a-button type="link" @click.stop="removeItem(item,remove, `确定删除${item.name}角色?`, 'id')" danger :icon="h(DeleteOutlined)" />
                            </div>
                        </template>
                    </template>
                    <a-empty v-else />
                </template>
            </div>
        </a-card>
        <a-card class="flex-item user_wrapper" title="用户列表">
            <UserList :showSearch="false" :role_id="roleId" />
        </a-card>

        <template v-if="showInfo">
            <ItemInfo :info="showItem" @cancel="close" @submit="search()" />
        </template>

    </div>
</template>
<script setup lang="ts">
import { h } from 'vue';
import { FormOutlined,DeleteOutlined } from '@ant-design/icons-vue';
import UserList from '@/views/system/user/index.vue'
import { remoteList, remove } from '@/api/system/role'
import ItemInfo from './components/info.vue'
import { useTable } from '@/hooks/use-table';
import { IRole } from './role.type';

let {
    list,
    loading,
    showItem,
    showInfo,
    removeItem,
    pickItem,
    search,
    close,
} = useTable(remoteList, {});

//选中的角色
let name = ref<string>();
let roleId = ref<any>()
const selectItem = (item:IRole)=>{
    name.value = item.name;
    roleId.value = item.id;
}
</script>

<style lang="scss" scoped>
.role_wrap {
    margin: 20px;
    .side_box {
        margin-top: 15px;
        .side_item {
            display: flex;
            align-items: center;
            padding: 0 10px;
            margin: 2px 0;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: #666;
            border-radius: 4px;
            cursor: pointer;
            .name {
                flex: 1;
            }
            .icon {
                margin-left: 10px;
                font-size: 16px;
            }

            &:hover {
                color: #fff !important;
                background: var(--header-bg);
                opacity: .5;
                .ant-btn-link{
                    color: #fff;
                }
            }
            &.active {
                color: #fff;
                background: var(--header-bg);
                .ant-btn-link{
                    color: #fff!important;
                }
            }
        }
    }
    .user_wrapper {
        width: 0;
        margin-left: 20px;

        :deep(.page-table-container) {
            margin: 0;
        }

        :deep(.ant-card .ant-card-body) {
            padding: 0;
        }
    }
}
</style>